<template>
  <div>
    <ul>
      <li
        v-for="n in newsList"
        :key="n.id"
      >
        <router-link :to="`/home/news/detail?id=${n.id}&title=${n.title}`">
          {{ n.title }}（字符串写法） </router-link>&nbsp;&nbsp;
        <router-link :to="{
            path: '/home/news/detail',
            query: {
              id: n.id,
              title: n.title,
            },
          }">
          {{ n.title }}（对象写法）</router-link>
      </li>
    </ul>
    <input type="text" />
    <router-view></router-view>
  </div>

</template>

<script>
export default {
  name: 'News',
  data() {
    return {
      newsList: [
        { id: '001', title: 'News001' },
        { id: '002', title: 'News002' },
        { id: '003', title: 'News003' },
      ],
    }
  },
  created() {},
  methods: {},
  beforeDestroy() {
    console.log('News组件即将卸载')
  },
}
</script>

<style lang="less" scoped></style>
